<!-- src/components/CourseCard.vue -->
<template>
  <div class="course-card">
    <img
      :src="courseImageUrl"
      alt="课程图片"
      class="course-image"
    >
    <div class="course-info p-3">
      <h3 class="course-name h5">
        {{ course.courseName }}
      </h3>
      <p class="course-code text-muted small">
        课程编号：{{ course.courseId }}
      </p>
      
      <router-link 
        :to="{ path: '/course/' + course.courseId }"
        class="enter-btn btn btn-primary w-100 d-flex align-items-center justify-content-center"
        @click="$emit('enter-course', course)"
      >
        <i class="bi bi-door-open me-2" />
        进入课程
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  course: {
    type: Object,
    required: true
  }
});

// 设置默认图片 URL
const DEFAULT_IMAGE_URL = 'https://spoc.buaa.edu.cn/inco-filesystem/fileManagerSystem/getFileStream?scjlid=1981389556AF1337E0630211FE0A6CEE';

// console.log(props.course.courseId);

// 如果 course.imageUrl 不存在，则使用默认图片
const courseImageUrl = computed(() => {
  return props.course.imageUrl ? props.course.imageUrl : DEFAULT_IMAGE_URL;
});
</script>

<style scoped>
.course-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
</style>